<template>
  <div class="content index-page">
    <div class="banner">
      <img src="http://files.wabei.cn/2022Vote/bannerV3.jpg" alt>
    </div>
    <div class="search">
      <div class="ipt">
        <input
          type="text"
          placeholder="请输入股票名称/代码 投票"
          @blur="loseFocus"
          @keyup="searchCompany"
          v-model="companyName"
        >
        <img src="http://files.wabei.cn/img/search-btn.png" alt @click="searchCompany">
      </div>
      <ul v-if="lists.length>0">
        <li
          @click="toCompanyPage(item.id)"
          v-for="(item,key) in lists"
          :key="key"
        >{{item.stockName}}({{item.stockCode}})</li>
      </ul>
    </div>
    <div class="prize-list">
      <div class="main-prize prize-name" v-for="(item,key) in prize" :key="key" v-if="key!=0 ">
        <h2>{{item.prizeTitle}}</h2>
        <div
          v-for="(val,k) in item.prizeList"
          :key="k"
          v-if="val.prizeIdex!=6  && val.prizeIdex!=9 && val.prizeIdex!=4&& val.prizeIdex!=7"
        >
          <div class="prize-title" @click="showPrizeDetail(item.prizeType,k,key,val.prizeIdex)">
            <div>
              <img
                class="to-bottom"
                v-if="clickedId===k && prizeTypeClicked===key"
                src="http://files.wabei.cn/img/index-arrow-bottom.png"
                alt
              >
              <img class="to-right" v-else src="http://files.wabei.cn/img/index-arrow.png" alt>
              <span class="name">{{val.prizeName}}</span>
            </div>
            <span
              class="tips"
            >{{item.prizeType==='mainPrize'?val.prizeTips:(item.prizeType==='renwuPrize'?"参评董事长："+val.prizeNumber+"名":"参评企业："+val.prizeNumber+"名")}}</span>
          </div>
          <!-- 金股奖的说明 -->
          <div
            class="shuoming"
            v-if="item.prizeType==='mainPrize' && k===clickedId && prizeTypeClicked===key"
          >{{val.prizeShuoming}}</div>

          <!-- 其他奖项点击奖项名称弹出明细 -->
          <div
            class="prize-detail"
            v-if="item.prizeType!=='mainPrize' && k===clickedId && prizeTypeClicked===key"
          >
            <div v-cloak>
              <h4 v-if="item.prizeType==='renwuPrize'">
                参评董事长:
                <span class="join-number">{{val.prizeNumber}}</span>
                当前总票:
                <span class="votes join-number">{{val.totalVotes}}</span>
              </h4>
              <h4 v-else>
                参评企业：
                <span class="join-number">{{val.prizeNumber}}</span>
                当前总票：
                <span class="join-number">{{val.totalVotes}}</span>
              </h4>
              <ul >
               
                <li v-for="(prizeItem,idx) in val.companyList" v-if="idx<=9" :key="idx">
                  <div>
                    <span class="number">
                      <!-- {{prizeItem.rateNum}} -->
                      {{idx+1}}
                    </span>
                    <span
                      v-if="item.prizeType==='renwuPrize'"
                      class="company-code"
                      @click="toCompanyPage(prizeItem.companyID)"
                    >{{prizeItem.ceo}} - {{prizeItem.stockName}}</span>
                    <span
                      v-if="item.prizeType==='hangyePrize'"
                      class="company-code"
                      @click="toCompanyPage(prizeItem.companyID)"
                    >{{prizeItem.stockName}}&nbsp;({{prizeItem.stockCode}})</span>
                    <span class="current-votes">当前票数：{{prizeItem.votes}}</span>
                    <button @click="toCompanyPage(prizeItem.companyID)">投票</button>
                  </div>
                </li>
              </ul>
              <!-- 查看更多 -->
              <div class="load-more" @click="jumpPage(val.prizeIdex)">查看更多</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-transfer-dom>
      <Loading :show="show1"></Loading>
    </div>
  </div>
</template>

<script>
import { TransferDom, Loading } from "vux";
export default {
  name: "Index",
  data() {
    return {
      show1: true,
      clickedId: -1, //被点击的列表下标
      prizeTypeClicked: -1, //被点击的奖品类型下标
      companyName: "",
      lists: [],
      flag: 0, //标记被点击的是否是下面的列表，1是，0不是
      title: [
        {
          prizeIdex: 2,
          prizeName: "高新技术领军企业",
          prizeNumber: 0,
          companyList: "",
          totalVotes: 0
        },
        {
          prizeIdex: 3,
          prizeName: "现代服务领军企业",
          prizeNumber: 0,
          companyList: "",
          totalVotes: 0
        },
        {
          prizeIdex: 4,
          prizeName: "数字营销领军企业",
          prizeNumber: 0,
          companyList: "",
          hide:true,
          totalVotes: 0
        },
        {
          prizeIdex: 5,
          prizeName: "新一代信息技术领军企业",
          prizeNumber: 0,
          companyList: "",
          totalVotes: 0
        },
        {
          prizeIdex: 6,
          prizeName: "影视娱乐领军企业",
          prizeNumber: 0,
          companyList: "",
          totalVotes: 0
        },
        {
          prizeIdex: 7,
          prizeName: "消费升级领军企业",
          prizeNumber: 0,
          companyList: "",
          totalVotes: 0
        },
        {
          prizeIdex: 8,
          prizeName: "智能制造领军企业",
          prizeNumber: 0,
          hide:true,
          companyList: "",
          totalVotes: 0
        },
        {
          prizeIdex: 9,
          prizeName: "金融服务领军企业",
          prizeNumber: 0,
          companyList: "",
          totalVotes: 0
        },
        {
          prizeIdex: 10,
          prizeName: "医疗健康领军企业",
          prizeNumber: 0,
          companyList: "",
          totalVotes: 0
        },
        {
          prizeIdex: 11,
          prizeName: "能源环保领军企业",
          prizeNumber: 0,
          companyList: "",
          totalVotes: 0
        }
      ],
      prize: [
        {
          prizeType: "mainPrize",
          prizeTitle: "主奖",
          prizeList: [
            {
              prizeIdex: -1,
              prizeName: "金股奖",
              prizeTips: "	(不参与投票环节)",
              prizeShuoming:
                "根据挖贝新三板研究院每年发布的《挖贝新三板最具成长性报告》排名颁奖，榜单将于2019年12月26日揭晓"
            }
          ]
        },
        {
          prizeType: "renwuPrize",
          prizeTitle: "人物奖",
          prizeList: [
            {
              prizeName: "北交所·新三板杰出董事长",
              prizeIdex: 1,
              prizeNumber: 0,
              companyList: [],
              totalVotes: 0
            }
          ]
        },
        {
          prizeType: "hangyePrize",
          prizeTitle: "行业奖",
          prizeList: []
        }
      ]
    };
  },
  components: {
    Loading
  },
  directives: {
    TransferDom
  },
  methods: {
    showPrizeDetail(type, k, key, idx) {
      //idx表示的是被点击奖项的id,key代表是哪种人物奖还是行业奖品
      var that = this;
      if (idx === -1) {
        if (that.prizeTypeClicked != key) {
          that.clickedId = -1;
        }
        if (that.clickedId != k) {
          that.clickedId = k;
        } else {
          that.clickedId = -1;
        }
        that.prizeTypeClicked = key;
        return;
      }
      if (k === this.clickedId && this.prizeTypeClicked === key) {
        if (that.prizeTypeClicked != key) {
          that.clickedId = -1;
        }
        if (that.clickedId != k) {
          that.clickedId = k;
        } else {
          that.clickedId = -1;
        }
        that.prizeTypeClicked = key;
        return;
      }
      this.show1 = true;
      that.$ajax
        .get(that.commenPath + "/vote/polls/0/" + idx + "/top")
        .then(function(res) {
          if (res.data.code == 0) {
            if (that.prizeTypeClicked != key) {
              that.clickedId = -1;
            }
            if (that.clickedId != k) {
              that.clickedId = k;
            } else {
              that.clickedId = -1;
            }
            that.prizeTypeClicked = key;
            var data = res.data.data;
            if (idx === 1) {
              that.prize[1].prizeList[0].totalVotes = data.totalVotes;
              that.prize[1].prizeList[0].companyList = that.sortArr(data.list);
            } else {
              that.prize[2].prizeList[idx - 2].totalVotes = data.totalVotes;
              that.prize[2].prizeList[idx - 2].companyList = that.sortArr(
                data.list
              );
            }
          } else {
            that.$vux.toast.text(data.message, "middle");
          }
          that.show1 = false;
        })
        .catch(function(res) {
          console.log(res);
          that.show1 = false;
        });
    },
    sortArr: function(arr) {
      arr.forEach(function(value, index, array) {
        if (index == 0) {
          arr[index].rateNum = 1;
        } else {
          arr[index].votes == arr[index - 1].votes
            ? (arr[index].rateNum = arr[index - 1].rateNum)
            : (array[index].rateNum = arr[index - 1].rateNum + 1);
        }
      });
      return arr;
    },
    jumpPage(idx) {
      this.$router.push({ path: "/test/vote/enterprise/" + idx });
    },
    toCompanyPage(code) {
      this.flag = 1;
      // this.$router.push({path: '/vote/companyDetail?code='+code})
      window.location.href = "/static/page4/index.html?codes=" + code;
    },
    collection() {
      var that = this;
      this.$ajax
        .get(that.commenPath + "/vote/polls/collection")
        .then(function(res) {
          var data = res.data;
          that.show1 = false;
          if (data.code === 0) {
            for (var i = 0; i < data.data.length; i++) {
              if (data.data[i].projectID === 1) {
                that.prize[1].prizeList[0].prizeNumber = data.data[i].count;
              }
              for (var j = 0; j < that.prize[2].prizeList.length; j++) {
                if (
                  data.data[i].projectID ===
                  that.prize[2].prizeList[j].prizeIdex
                ) {
                  that.prize[2].prizeList[j].prizeNumber = data.data[i].count;
                }
              }
            }
          } else {
            that.$vux.toast.text(data.message, "middle");
          }
        })
        .catch(function(res) {
          console.log(res);
          that.show1 = false;
        });
    },
    searchCompany() {
      var that = this;
      this.$ajax
        .get(that.commenPath + "/vote/polls/" + that.companyName + "/filter")
        .then(function(res) {
          if (res.data.code == 0) {
            var data = res.data.data;
            that.lists = data;
          } else {
            that.$vux.toast.text(data.message, "middle");
          }
        })
        .catch(function(res) {
          console.log(res);
        });
    },
    toVote(idx, k1, k2, k3) {
      //奖项编号,k1、k2、k3分别代表在数组中的下标
      if (!idx) {
        return;
      }
      var that = this;
      var votes = that.getCookie("votes") - 0;
      if (votes < 5) {
        that.setCookie("votes", votes++);
        that.$vux.toast.text(
          "投票成功,今天还可投" + data.data + "票",
          "middle"
        );
        that.prize[k1].prizeList[k2].totalVotes++;
        that.prize[k1].prizeList[k2].companyList[k3].votes++;
      } else if (votes == 5) {
        that.setCookie("votes", votes++);
        that.$vux.toast.text("投票成功,今天的票数已经投完啦！", "middle");
        that.prize[k1].prizeList[k2].totalVotes++;
        that.prize[k1].prizeList[k2].companyList[k3].votes++;
      } else {
        that.$vux.toast.text("今天的票数已经投完啦,明天再来呦！", "middle");
      }
      this.$ajax
        .post(
          that.commenPath +
            "/vote/vote/" +
            idx +
            "/" +
            that.getCookie("accesskey")
        )
        .then(function(res) {
          var data = res.data;
          // if (data.code == 0) {
          //   // if (data.data != 0) {

          //   // } else {
          //   //   that.$vux.toast.text("投票成功,今天的票数已经投完啦！", "middle");
          //   // }
          // } else {
          //   that.$vux.toast.text(data.message, "middle");
          // }
        })
        .catch(function() {
          that.$vux.toast.text("出错啦!", "middle");
        });
    },
    loseFocus() {
      setTimeout(() => {
        if (this.flag !== 1) {
          this.lists = [];
        }
      }, 200);
    }
  },
  created() {
    this.prize[2].prizeList = this.title;
    this.collection();
  },
  mounted() {
    this.$router.afterEach((to, from, next) => {
      window.scrollTo(0, 0);
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
[v-cloak] {
  display: none;
}
h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0px;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.div {
  .content {
    font-size: 1rem;
  }
}
.expand-transition {
  transition: all 0.3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}
.expand-enter,
.expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}
.prize-detail li:nth-child(10n) {
  border-bottom: 1px solid #f2f2f2 !important;
}
.prize-list .main-prize.prize-name:last-child > div {
  border-bottom: 2px solid #fff;
}
.search {
  padding: 48px 30px 30px;
  position: relative;
  ul {
    width: calc(100% - 180px);
    background-color: #ccc;
    margin-left: 30px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    position: absolute;
    top: 108px;
    max-height: 600px;
    overflow-y: scroll;
    li {
      width: 100%;
      line-height: 40px;
      font-size: 20px;
      margin: 0px !important;
      padding: 10px 10px;
    }
  }
  .ipt {
    position: relative;
    width: 100%;
    background-color: #d5d5d5;
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-radius: 30px;
    padding: 30px;
    box-sizing: border-box;

    > input {
      border-right: 1px solid #b5b5b5;
      height: 42px;
      line-height: 42px;
      width: calc(100% - 1.2rem);
      position: absolute;
      top: 7px;
      left: 30px;
      background-color: #d5d5d5;
      color: #fff;
      font-size: 30px;
    }
    > img {
      width: 42px;
      display: inline-block;
      position: absolute;
      right: 25px;
      top: 12px;
    }
    input::-webkit-input-placeholder {
      color: #fff;
    }
    input::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #fff;
    }
    input:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: #fff;
    }
    input:-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: #fff;
    }
  }
}
.company-code {
  cursor: pointer;
}
.vux-x-icon {
  fill: #b5b5b5;
}
</style>

